<template>
	<view>
		<view class="nav_bar" style="background-color: rgba(255, 255, 255, 1);" v-if="no_nav != 1">
			<uni-nav-bar color="#333" left-icon="left" title="图片编辑" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="$util.back()"></uni-nav-bar>
		</view>

		<view class="icon_back flex_r_around" @click="$util.back()" v-else>
			<text>取消</text>
		</view>

		<view class="nav_box" v-if="no_nav != 1"></view>

		<qf-image-cropper :width="width" :height="height" :radius="0" @crop="handleCrop" :src="src"></qf-image-cropper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: '',

				width: 500,
				height: 500,

				no_nav: 0,
				
				flag: true,
			}
		},
		methods: {
			async handleCrop(e) {
				if(!this.flag){
					return;
				}
				
				this.flag = false;
				const eventChannel = this.getOpenerEventChannel();
				var url = e.tempFilePath;
				this.$upload(url, {
					type: 'picture'
				}).then(res => {
					if (res.status == 2 || res.status == 1) {
						eventChannel.emit('getImage', {
							src: res.result.url
						});
						this.$util.back();
					} else {
						this.$util.msg(res.msg);
					}
				});


			},

		},

		onLoad(option) {
			this.src = option.src;
			this.no_nav = option.no_nav || 0;
			if (option.width && option.height) {
				this.width = Number(option.width);
				this.height = Number(option.height);
			}
		}
	}
</script>

<style lang="less" scoped>
	.icon_back {
		position: fixed;
		top: 20rpx;
		left: 32rpx;
		z-index: 99;
		width: 96rpx;
		height: 48rpx;
		background: #FD2A53;
		border-radius: 24rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
	}
</style>